import React, { Component } from 'react';
// import axios from 'axios'
// import 'antd/dist/antd.css'
// import { Input , Button , List } from 'antd'
import TodoListUI from './todolistUi'
import store from '../../store'
import { connect } from 'react-redux'
// import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from '../../store/actionTypes'
import { changeInputAction , getTodoList, addItemAction , deleteItemAction } from '../../store/actionCreatores'

// const data=[
//     '早8点开晨会，分配今天的开发工作',
//     '早9点和项目经理作开发需求讨论会',
//     '晚5:30对今日代码进行review'
// ]

class TodoList extends Component {
  constructor(props){
    // console.log('19store.getState', store.getState())
    console.log('20props', props)
    super(props)
    this.state = store.getState()
    // this.state = {
    //   inputValue : 'Write Something999',
    //     list:[
    //         '早上4点起床，锻炼身体2',
    //         '中午下班游泳一小时'
    //     ]
    // }
    // console.log('18', this.state)
    this.deleteItem = this.deleteItem.bind(this)
    // this.changeInputValue= this.changeInputValue.bind(this)
    this.clickBtn = this.clickBtn.bind(this)
    this.storeChange = this.storeChange.bind(this)  //转变this指向
    store.subscribe(this.storeChange) //订阅Redux的状态
  }
    render() {
        return (
          <TodoListUI
          inputValue={this.props.inputValue}
          placeholder={this.props.placeholder}
          list={this.props.list}
          // changeInputValue={this.changeInputValue}
          changeInputValue={this.props.changeInputValue}
          clickBtn={this.clickBtn}
          deleteItem={this.deleteItem}
          />
          // 使用react-redux之后可以 state改为props
          // <TodoListUI
          // inputValue={this.state.inputValue}
          // placeholder={this.state.placeholder}
          // list={this.state.list}
          // changeInputValue={this.changeInputValue}
          // clickBtn={this.clickBtn}
          // deleteItem={this.deleteItem}
          // />
            // <div style={{margin:'10px'}}>
            //     <div>
            //         <Input
            //         placeholder={this.state.placeholder}
            //         style={{ width:'250px', marginRight:'10px'}}
            //         onChange={this.changeInputValue}
            //         value={this.state.inputValue}
            //         />
            //         <Button onClick={this.clickBtn} type="primary">增加</Button>
            //     </div>
            //     <div style={{margin:'10px',width:'300px'}}>
            //         <List
            //             bordered
            //             dataSource={this.state.list}
            //             renderItem={(item, index) => (<List.Item onClick={this.deleteItem.bind(this, index)}>{item}</List.Item>)}
            //         />    
            //     </div>
            // </div>
         );
    }
    componentDidMount(){
      const action = getTodoList()
      store.dispatch(action)
      // axios.get('https://rapserver.sunmi.com/app/mock/241/GET/todolist').then((res)=>{
      //     // console.log('68', res)
      //     const data = res.data
      //     const action = getListAction(data)
      //     store.dispatch(action)
      // })
    }
    //   axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res)=>{  


    // changeInputValue(e){
    //   // console.log(e.target.value)
    //   const action = changeInputAction(e.target.value)
    //   store.dispatch(action)
    // }
    storeChange(){
      this.setState(store.getState())
      // console.log('63storeChange,store.getState():', store.getState())
    }
    clickBtn(){
      const action = addItemAction()
      store.dispatch(action)
    }
    deleteItem(index) {
      const action = deleteItemAction(index)
      store.dispatch(action)
    }
}

const stateToProps = (state)=>{
  return {
      inputValue : state.inputValue,
      list : state.list,
      placeholder : state.placeholder
  }
}
const dispatchToProps = (dispatch) =>{
  return {
    changeInputValue(e){
          // console.log(e.target.value)
          const action = changeInputAction(e.target.value)
          dispatch(action)
      }
  }
}

export default connect(stateToProps, dispatchToProps)(TodoList);
// export default TodoList;
